<template>
    <div class="content-grid">
        <a-space style="width: 20%;position: relative;top: 10vh;left: -35vw" size="large">
            <a-statistic title="全部营业额" :value="allIncome" show-group-separator >
                <template #suffix>￥</template>
            </a-statistic>
            <a-statistic title="同比增长"
                         :value="allIncome !== 0?(recentSevenDayIncome/allIncome)*100:0"
                         :precision="2"
                         :value-from="0"
                         :start="true"
                         animation
                         :value-style="{ color: '#0fbf60' }">
                <template #prefix>
                    <icon-arrow-rise />
                </template>
                <template #suffix>%</template>
            </a-statistic>
        </a-space>
        <LineChart style="position: relative;top: 1vh;right:-5vw" :orderList="recentSevenDayOrderList"/>
        <BarChart style="position: relative;top: 10vh;right:-5vw"  :orderList="recentSevenDayOrderList"/>
        <a-card  style="position: relative;top: -30vh;left: 5vw; width: 200px ">
            <div class="crown">
                <svg class="svg-icon" viewBox="0 0 1138 1024" xmlns="http://www.w3.org/2000/svg">
                    <path d="M186.997713 866.592817L96.433117 325.992722l245.184301 204.225439 224.932418-358.162496 200.641538 358.219383 275.334574-204.282326-83.965668 540.600095H186.997713zM60.821662 269.503625a59.902336 59.902336 0 1 1 0-119.747785 59.902336 59.902336 0 0 1 0 119.747785zM569.8493 119.776228A59.902336 59.902336 0 1 1 569.8493 0.028444a59.902336 59.902336 0 0 1 0 119.747784z m508.970751 149.727397a59.902336 59.902336 0 1 1 0-119.747785 59.902336 59.902336 0 0 1 0 119.747785zM213.279649 1001.984612a28.443654 28.443654 0 1 1 0-56.887309h720.193328a28.443654 28.443654 0 0 1 0 56.887309H213.222762z" fill="#BD983D"></path>
                </svg>
            </div>
            <template #cover>
                <div
                    :style="{
          height: '150px',
          overflow: 'hidden',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
        }"
                >
                    <img
                        :style="{ width: '80%', transform: 'translateY(20px)' }"
                        alt="dessert"
                        :src="hotGoods.foodImage"
                    />
                </div>
            </template>
            <a-card-meta :title=hotGoods.foodName>
                <template #avatar>
                    <div
                        :style="{ display: 'flex', alignItems: 'center', color: '#1D2129' }"
                    >
                        <a-typography-text style="color: red">销量：{{ hotGoods.totalQuantity }}</a-typography-text>
                    </div>
                </template>
            </a-card-meta>
        </a-card>
    </div>

</template>

<script setup lang="ts">
import {list} from "../service/orders.ts";
import {onMounted, ref} from "vue";
import {OrderVO} from "../type/order";
import LineChart from "./LineChart.vue";
import BarChart from "./BarChart.vue";
import {IconArrowRise} from "@arco-design/web-vue/es/icon";
const orderList = ref<OrderVO[]>([])
const recentSevenDayOrderList = ref<OrderVO[]>([])
const id = defineModel('id', {
    required: true,
    default: 0,
    type: Number
})
const allIncome = ref<number>(0)
const recentSevenDayIncome = ref<number>(0)
//热销商品
const hotGoods = ref({})

/**
 * 获取销量最高的商品
 * */
const findHotGoods = () => {
    // 创建一个对象用于统计每个食品的总销量
    const foodStatistics = {};
    orderList.value.forEach(order => {
        // 遍历订单详情
        order.orderDetailVOS.forEach(detail => {
            // 如果食品ID已经存在于统计对象中，则累加销量
            if (foodStatistics[detail.foodId]) {
                foodStatistics[detail.foodId].totalQuantity += detail.quantity;
            } else {
                // 如果食品ID不存在于统计对象中，则创建新的条目
                foodStatistics[detail.foodId] = {
                    foodId: detail.foodId,
                    foodName: detail.foodName,
                    foodImage: detail.foodImg,
                    totalQuantity: detail.quantity
                };
            }
        });
    });
    // 找出最热门的食品
    let maxQuantity = 0;
    for (const foodId in foodStatistics) {
        if (foodStatistics[foodId].totalQuantity > maxQuantity) {
            maxQuantity = foodStatistics[foodId].totalQuantity;
            hotGoods.value = foodStatistics[foodId];
        }
    }
    console.log(hotGoods.value)
}

/*
* 获取订单
* */
const loadData = async () => {
    const res = await list(id.value);
    orderList.value = res.data
    //已完成的订单
    if (res.data.length>0){
        orderList.value = res.data.filter(order => order.orderState !== 0)
        const now = Date.now();
        // 计算七天前的时间戳
        const sevenDaysAgo = now - 7 * 24 * 60 * 60 * 1000;
        // 筛选出 createTime 在最近七天内的订单
        recentSevenDayOrderList.value = orderList!.value.filter(order => order.createTime >= sevenDaysAgo);
        // 计算最近七天的总收入
        recentSevenDayIncome.value = recentSevenDayOrderList!.value.reduce((sum, order) => sum + order.totalPrice, 0);
        //计算全部收入
        allIncome.value = orderList!.value.reduce((sum, order) => sum + order.totalPrice, 0);
        //计算热销商品
        findHotGoods()
    }
}
onMounted(async () =>{
    await loadData();
})
</script>

<style scoped>
.content-grid{
    width: 95vw;
    height: 100vh;
    position: relative;
}
.crown{
    width: 50px;
    height: 50px;
    position: absolute;
    top: -10%;
    right: -10%;
    transform: rotate(45deg);
}
</style>
